<template>
    <div class="app-container">
        <div class="Table">
            <div class="Table-title">资源清单列表</div>
            <div class="Table-wrapper">
                <el-form
                    ref="form"
                    style="text-align: right"
                    label-width="100px"
                >
                    <el-select
                        style="margin: 0 5px"
                        filterable
                        clearable
                        v-model="queryParams.resourcesType"
                        placeholder="请选择资源类型"
                    >
                        <el-option
                            v-for="item in ResourceType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <el-select
                        style="margin: 0 5px"
                        filterable
                        clearable
                        v-model="queryParams.supplier"
                        placeholder="请选择云服务商"
                    >
                        <el-option
                            v-for="item in logicListALL"
                            :key="item.cloudSupplier"
                            :label="item.cloudSupplierName"
                            :value="item.cloudSupplier"
                        >
                        </el-option>
                    </el-select>
                    <el-cascader
                        :options="deptOptions"
                        v-model="deptId"
                        :props="{ value: 'id', checkStrictly: true }"
                        :show-all-levels="false"
                        placeholder="请选择部门"
                        change-on-select
                        clearable
                        filterable
                        @change="handleChange"
                    >
                    </el-cascader>
                    <el-select
                        style="margin: 0 5px"
                        filterable
                        clearable
                        v-model="queryParams.projectId"
                        placeholder="请选择应用系统"
                    >
                        <el-option
                            v-for="(item,index) in projectLists"
                            :key="index"
                            :label="item.projectname"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <el-input
                        style="
                            width: 217px;
                            display: inline-block;
                            margin: 0 5px;
                        "
                        placeholder="请输入资源名称"
                        v-model="queryParams.resourceName"
                        clearable
                    >
                    </el-input>
                    <el-button @click="getData" type="primary">搜索</el-button>
                    <!-- <el-button type="primary">导出</el-button> -->
                </el-form>
                <div style="padding: 20px 0px 30px;">
                    <el-table @expand-change="expandChange" :row-class-name="getRowClass" :data="tableData" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-table
                                    :data="props.row.workOrderInfo"
                                    :show-header="status"
                                    style="width: 100%"
                                >
                                    <el-table-column
                                        label="">
                                        <template slot-scope="scope">
                                            {{scope.row.formType}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="姓名">
                                        <template slot-scope="scope">
                                            申请人：{{scope.row.createByName}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="address"
                                        label="地址"
                                    >
                                        <template slot-scope="scope">
                                            时间：{{scope.row.createTime}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="address"
                                        label="地址"
                                    >
                                        <template slot-scope="scope">
                                            订单号：：<span @click="OrderDetails(scope.row)" style="color: rgb(24, 144, 255);cursor: pointer;">{{scope.row.id}}</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column label="资源名称" prop="resourceName" width="260">
                        </el-table-column>
                        <el-table-column label="资源类型" width="120">
                            <template>
                                {{queryParams.resourcesType}}
                            </template>
                        </el-table-column>
                        <el-table-column label="云平台" prop="supplierName" width="120">
                        </el-table-column>
                        <el-table-column label="单位名称" prop="deptName" width="260">
                        </el-table-column>
                        <el-table-column label="应用系统" prop="projectName">
                        </el-table-column>
                        <el-table-column label="计费状态" width="120">
                            <template>
                                <i style="display: inline-block;
                                        background-color: #65c83f;
                                        vertical-align: middle;
                                        width: 20px;
                                        height: 20px;
                                        margin-right: 5px;
                                        border-radius: 20px;">
                                </i>
                                <span>计费中</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交付状态" width="120">
                            <template>
                                <i style="display: inline-block;
                                        background-color: #65c83f;
                                        vertical-align: middle;
                                        width: 20px;
                                        height: 20px;
                                        margin-right: 5px;
                                        border-radius: 20px;">
                                </i>
                                <span>已交付</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="运行状态" width="120">
                            <template>
                                <i style="display: inline-block;
                                        background-color: #65c83f;
                                        vertical-align: middle;
                                        width: 20px;
                                        height: 20px;
                                        margin-right: 5px;
                                        border-radius: 20px;">
                                </i>
                                <span>运行中</span>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <pagination
                        v-show="total > 0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getData"
                    />
                </div>
            </div>
        </div>
        <el-dialog
            v-if="DetailsData"
            :title="dialogtitle"
            :visible.sync="dialogVisible"
            width="70%"
        >
            <div class="tracking">
                <div class="title" style="text-align: left;">
                    <span>基本信息</span>
                </div>
                <div class="content">
                    <ul>
                        <li>订单ID:{{DetailsData.id}}</li>
                        <li>申请人:{{DetailsData.createBy}}</li>
                        <li>申请单位:{{DetailsData.officeName}}</li>
                    </ul>
                    <ul>
                        <li>应用系统:{{DetailsData.projectName}}</li>
                        <li>申请时间:{{DetailsData.createTime}}</li>
                        <li>云服务商:{{DetailsData.cloudSupplierName}}</li>
                    </ul>
                    <ul>
                        <li>申请类型:{{dialogtitle.replace('订单详情','')}}</li>
                        <li>交付时间:</li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="title" style="text-align: left;">
                <span>资源清单</span>
            </div>
            <div class="basic-information" v-if="dialogtitle == '资源申请订单详情'">
                <!-- <div class="title">
                    <span>资源清单</span>
                </div> -->
                <div class="footer">
                    <div class="Table-title">云主机</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.hosts" style="width: 100%">
                            <el-table-column
                                prop="instanceName"
                                label="名称"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="规格"
                                width="180"
                            >
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.flavorType == 2">{{cloudFlavorCodeName(scope.row.cloudFlavorCode)}}</span>
                                    <span v-if="scope.row.flavorType == 1">{{ scope.row.cpuNumber }}核vCPU；{{ scope.row.memorySize }}G内存；</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="osName"
                                label="操作系统"
                            ></el-table-column>
                            <el-table-column
                                prop="address"
                                label="系统盘容量"
                            >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.flavorType == 1">{{
                                        scope.row.osDisk?scope.row.osDisk.diskServerName:''
                                    }}，{{ scope.row.osDisk?scope.row.osDisk.dataDiskSize:'' }}GB</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="数据盘容量"
                            >
                                <template slot-scope="scope">
                                    <div
                                        v-if="scope.row.flavorType == 1 && scope.row.disks"
                                        style="margin: 0 0 6px 16px"
                                        v-for="(item, index) in scope.row.disks"
                                        :key="index"
                                    >
                                        <span>{{ item.diskServerName }}</span
                                        >，{{ item.dataDiskSize }}GB
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">数据库</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.databases" style="width: 100%">
                            <el-table-column
                                prop="databaseVersion"
                                label="版本"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="serverName"
                                label="类型"
                                width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="databaseVersion"
                                label="位数"
                            ></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">存储产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.storeProducts" style="width: 100%">
                            <el-table-column
                                prop="diskServerName"
                                label="磁盘类型"
                            >
                            </el-table-column>
                            <el-table-column
                                label="磁盘用量"
                                width="180"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.dataDiskSize}}GB
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="productCode"
                                label="存储类型"
                            ></el-table-column>
                            <el-table-column
                                prop="diskCode"
                                label="服务类型"
                            ></el-table-column>
                            <el-table-column
                                label="磁盘"
                            >
                                <template slot-scope="scope">
                                    {{
                                        scope.row.diskServerName
                                    }}，{{
                                        scope.row.dataDiskSize
                                    }}GB
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">安全产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.safeProducts" style="width: 100%">
                            <el-table-column
                                prop="productName"
                                label="产品名称"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="basic-information" v-if="dialogtitle == '资源变更订单详情'">
                <div class="footer">
                    <div class="Table-title">云主机</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.hosts" style="width: 100%">
                            <el-table-column
                                prop="instanceName"
                                label="名称"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.instanceName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="规格"
                                width="180"
                            >
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.changeTo.flavorType == 2">{{cloudFlavorCodeName(scope.row.changeTo.cloudFlavorCode)}}</span>
                                    <span v-if="scope.row.changeTo.flavorType == 1">{{ scope.row.changeTo.cpuNumber }}核vCPU；{{ scope.row.changeTo.memorySize }}G内存；</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="osName"
                                label="操作系统"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.osName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="系统盘容量"
                            >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.changeTo.flavorType == 1">{{
                                        scope.row.changeTo.osDisk?scope.row.changeTo.osDisk.diskServerName:''
                                    }}，{{ scope.row.changeTo.osDisk?scope.row.changeTo.osDisk.dataDiskSize:'' }}GB</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="数据盘容量"
                            >
                                <template slot-scope="scope">
                                    <div
                                        v-if="scope.row.changeTo.flavorType == 1 && scope.row.changeTo.disks"
                                        style="margin: 0 0 6px 16px"
                                        v-for="(item, index) in scope.row.changeTo.disks"
                                        :key="index"
                                    >
                                        <span>{{ item.diskServerName }}</span
                                        >，{{ item.dataDiskSize }}GB
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">数据库</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.databases" style="width: 100%">
                            <el-table-column
                                prop="databaseVersion"
                                label="版本"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.databaseVersion}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="serverName"
                                label="类型"
                                width="180"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.serverName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="databaseVersion"
                                label="位数"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.databaseVersion}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">存储产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.storeProducts" style="width: 100%">
                            <el-table-column
                                prop="diskServerName"
                                label="磁盘类型"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.diskServerName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="磁盘用量"
                                width="180"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.dataDiskSize}}GB
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="productCode"
                                label="存储类型"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.productCode}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="diskCode"
                                label="服务类型"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.changeTo.diskCode}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="磁盘"
                            >
                                <template slot-scope="scope">
                                    {{
                                        scope.row.changeTo.diskServerName
                                    }}，{{
                                        scope.row.changeTo.dataDiskSize
                                    }}GB
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer">
                    <div class="Table-title">安全产品</div>
                    <div class="Table-list">
                        <el-table :data="DetailsData.safeProducts" style="width: 100%">
                            <el-table-column
                                prop="productName"
                                label="产品名称"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { logicList } from "@/api/basic/services";
import { treeselect } from "@/api/system/dept";
import { resourcesList,CloudUplist } from "@/api/Resource/index";
import {
    resourcesUpDetail,
} from "@/api/resources/apply";
import {
    getResourcesChange,
} from "@/api/resources/change";
import {
    projectList
  } from "@/api/cloud/object";
export default {
    data() {
        return {
            status: false,
            input: "",
            value: "",
            options: [],
            ResourceType: [
                {
                    label: "云主机",
                    value: "云主机",
                },
                {
                    label: "存储产品",
                    value: "存储产品",
                },
                {
                    label: "数据库",
                    value: "数据库",
                },
                {
                    label: "安全产品",
                    value: "安全产品",
                },
            ],
            // 云服务商列表
            logicListALL: [],
            // 部门数据
            deptOptions: [],
            projectLists: [],
            deptId: null,
            total : 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                resourcesType: "",
                supplier: "",
                deptId: null,
                resourceName : '',
                projectId: "",
            },
            tableData: [
            ],
            DetailsData : null,
            dialogVisible: false,
            dialogtitle: "资源申请订单详情",
            // 公共配置项
            configure:JSON.parse(sessionStorage.getItem('configure')),
        };
    },
    created() {
        // 获取云服务商列表
        logicList().then((res) => {
            this.logicListALL = res.rows;
        });
        // 获取部门数据
        treeselect().then((res) => {
            this.deptOptions = res.data;
        });
        // 获取项目列表
        CloudUplist({
            pageNum: 1,
            pageSize: 9999,
            withStatistic: false,//不进行统计
        }).then((res) => {
            this.projectLists = res.rows;
        });
        this.queryParams.resourcesType = this.ResourceType[0].value
        this.getData()
    },
    methods: {
        expandChange(row,expandedRows){
            if(expandedRows.length>1){
                expandedRows.shift()
            }
        },
        // 规格翻译
        cloudFlavorCodeName(id){
            let cloudFlavorCodeName
            this.configure.wlfwqList.forEach(item=>{
                if(item.code == id){
                    cloudFlavorCodeName = item.remark
                }
            })
            return cloudFlavorCodeName
        },
        getRowClass(row,rowIndex){
            if(!row.row.workOrderInfo){  //判断当前行是否有子数据或者根据实际情况设置
                return 'row-expand-cover'
            }
        },
        getData(){
            resourcesList(this.queryParams).then(res=>{
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleChange(row) {
            if (row.length == 0) {
                this.queryParams.deptId = null;
            } else if (row.length == 1) {
                this.queryParams.deptId = row[0];
            } else {
                this.queryParams.deptId = row[row.length - 1];
            }
        },
        OrderDetails(item){
            if(item.formType == '变更'){
                getResourcesChange({id: item.id,forUpdate:true}).then(res=>{
                    this.dialogtitle = "资源变更订单详情",
                    this.DetailsData = res.data
                    this.dialogVisible = true;
                })
            }else{
                resourcesUpDetail(item.id).then(res=>{
                    this.dialogtitle = "资源申请订单详情",
                    this.DetailsData = res.data
                    this.dialogVisible = true;
                })
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.el-table{
    color: #000;
}
.app-container {
    .Table {
        background: #fff;
        .Table-title {
            font-size: 14px;
            padding-left: 20px;
            padding-right: 20px;
            margin: 0;
            font-weight: bold;
            line-height: 45px;
        }
        .Table-title::before {
            width: 4px;
            height: 14px;
            content: "";
            display: inline-block;
            background: #2197f4;
            margin-right: 8px;
        }
        .Table-wrapper {
            &::v-deep .el-table .row-expand-cover .cell .el-table__expand-icon {
                display: none;
            }
        }
    }
    .tracking {
        margin-top: 20px;
        height: 140px;
        .title {
            border-left: 6px solid #25a4f6;
            span {
                font-size: 16px;
                padding: 0 14px 0 24px;
                color: #25a4f6;
            }
        }
        .content {
            height: 60px;
            padding-left: 68px;
            margin-top: 30px;
            ul {
                width: 30%;
                height: 60px;
                margin-right: 30px;
                float: left;
                li {
                    height: 30px;
                    font-size: 14px;
                    color: #333333;
                    line-height: 30px;
                    list-style: none;
                    overflow: hidden;/*超出部分隐藏*/
                    white-space: nowrap;/*不换行*/
                    text-overflow:ellipsis;/*超出部分文字以...显示*/
                }
            }
        }
    }
    .title {
        margin-top: 20px;
        border-left: 6px solid #25a4f6;
        span {
            font-size: 16px;
            padding: 0 14px 0 24px;
            color: #25a4f6;
        }
    }
    .basic-information {
        // margin-top: 20px;
        height: 600px;
        overflow-y: auto;
        .title {
            border-left: 6px solid #25a4f6;
            span {
                font-size: 16px;
                padding: 0 14px 0 24px;
                color: #25a4f6;
            }
        }
        .footer {
            font-size: 14px;
            color: #555555;
            margin: 30px 80px 30px 80px;
            padding: 0;
            .Table-title {
                padding-top: 12px;
                padding-bottom: 12px;
                font-size: 14px;
                padding-left: 20px;
                padding-right: 20px;
                margin: 0;
                font-weight: bold;
            }
            .Table-list {
                background: #fff;
                padding: 10px 20px 20px 20px;
            }
        }
    }
}

</style>
